ng-option、ng-select是如何使用的?
分享人:余佳贝
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
ng-options 指令用于使用 <options> 填充 <select> 元素的选项。
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与
ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择。
ng-select用来将数据同HTML的select标签进行绑定。这个指令可以 和ng-model以及ng-options指令一起使用,构建精细且表现良好的动态表单。 ng-select 它可以帮助你通过数据模型来创建select元素.它很好的支持了select标签的语法, 而ng-options用在selectd上面
ng-option表达式的写法
1、ng-option表达式的写法
1、数组作为数据源
用数组中的值做标签。(label for value in array)
用数组中的值作为选中的标签。(select as label for value in array)
用数组中的值做标签组。(label group by group for value in array)
用数组中的值作为选中的标签组。(select as label group by group for value in array track by trackexpr)
2、对象作为数据源
用对象的键-值(key-value)做标签。(label for (key , value) in object)
用对象的键-值作为选中的标签。(select as label for (key , value) in object)
用对象的键-值作为标签组。(label group by group for (key, value) in object)
用对象的键-值作为选中的标签组。(select as label group by group for (key, value) in ob)
ng-options的值可以是一个内涵表达式(comprehension expression), 其实这只是一种有趣的说法,简单来说就是它可以接收一个数组或者对象, 并对它们进行循环,将内部的内容提供给select标签内部的选项。它可以是一下两种形式。 ng-options属性可用于使用通过评估理解表达式获得的数组或对象来动态生成option 元素的select元素。
参考一:菜鸟教程
用angularJS的ng-model绑定到select上,会自动增加一个value为空的option,这是为什么?
原因:ng-model没有初始化导致的, 如果ng-model所绑定的变量的值在ng-options绑定的value里面有, 下拉选框中就不会有空白的一项,选中别的数据项以后消失; 如果ng-model所绑定的变量的值不在ng-options绑定的value里面, 下拉选框中就不会有空白一项,并且只有当ng-options绑定的value里有对应 的text为空行时,这个空行才会一直存在于下拉选项里。
解决办法
方法一:将select中的一个option设置为空,就可以防止因添加ng-model自动添加空option的问题
方法二:自己预先添加一个value为空的option,再用ng-if="false"把它去掉
感谢大家观看